<template>
  <div class="Topbar">
      <div class="Topbar wrap">
          <div class="left">欢迎来到叩丁狼积分商城</div>
          <ul class="right">
            <!-- 用户名：游客 我的积分：-- 获取积分 叩丁狼官网 -->
            <li>
              <img :src="headImg" alt="" class="userIme">
              用户名：{{nickName}}</li>
            <li>我的积分：{{coin}}</li>
            <li>获取积分</li>
            <li>叩丁狼官网</li>
            <li class="cart-btn" v-if="isShowgwc">
            <img src="../assets/img/cart.png" alt="" />
            <span>购物车</span>
            <strong>{{ cartTotal }}</strong>
          </li>
              <li class="login" v-else @click="loginIsShow(true)">登陆</li>
          </ul>
      </div>
  </div>
</template>

<script>
import {mapMutations, mapState, mapActions } from 'vuex'
import{wexinApi} from '../JingPinApi/api'
export default {
  	data () {
        return {
            //购物车总数
            // cartTotal:0,
            // 是否显示购物车
            // isShowgwc:false  写在vuex里面

        }
    },
    computed:{
     ...mapState({
       isShowgwc:state=>state.Isshowgwc.isShowgwc,
      ToastText:state=>state.isShowToast.ToastText,
      nickName:state=>state.userInfo.nickName,
      coin:state=>state.userInfo.coin,
      headImg:state=>state.userInfo.headImg,
      cartTotal:state=>state.userInfo.cartTotal, 
     }),
     
    },
    // 路由地址切换时实时判断登陆状态
    // 第一种
    // watch:{
    //     '$route.path':{
    //       handler(newVal,oldVal){
    //         console.log(newVal,oldVal);
    //          let token= localStorage.getItem('x-auth-token')
    //           this.isShowgwcFn(Boolean(token))
    //       }
    //     }
    // },
    // 第二种 修改组件绑定的 key值 来重新加载组件
    
   methods:{
     ...mapMutations({
      // 登录框
      loginIsShow:'model/loginIsShow',

      // 提示框 弹框
      isShowToast:'isShowToast/isShowToast',

      // 显示购物车
          isShowgwcFn:'Isshowgwc/isShowgwcFn',
        // 初始化用户数据
       initUserInfo:'userInfo/initUserInfo'
    }),
    ...mapActions({
      // 修改用户登陆后的数据
      asyncchangUserInfo:'userInfo/asyncchangUserInfo',
     
    })
   },
      //  扫码之后页面会刷新
    created(){
      this.$router.onReady( async()=>{
        // console.log(this.$route.query.code);
        let Wxcode =this.$route.query.code
        if (Wxcode) {
          let res= await  wexinApi({
              code:Wxcode
            })
            if (res.code==400) {
                alert('二维码失效，请重新扫码')
                  this.loginIsShow(true)
            }else if (res.code==407) {
                alert('首次登陆，请绑定手机号登陆')
                this.loginIsShow(true)
                console.log(res);
                localStorage.setItem('uuid',res.uuid)
            }else if (res.code==0) {
            localStorage.setItem('x-auth-token',res['x-auth-token'])
            this.isShowgwcFn(true)
          // this.$router.push() 用来当前修改路由的地址
          this.$router.push(this.$route.path)
          this.asyncchangUserInfo()
            }
        }else{
            let token = localStorage.getItem('x-auth-token')
              this.isShowgwcFn(Boolean(token))
              if (token) {
                this.asyncchangUserInfo()
              }else{
                this.initUserInfo()
              }
        }
       
      })
    }
}
</script>

<style lang='less' scope>
.Topbar{
  display: flex;
  justify-content: space-between;
  color: #FFFEFE;
  height: 40px;
  background: #242B39;
  line-height: 40px;
  .right{
    display: flex;
    .userIme{
      width: 26px;
      height: 26px;
      background: #7D8696;
      border: 1px solid #8891A1;
      border-radius: 13px;
       vertical-align: middle;
    }
    li{
      cursor: pointer;
      margin-left: 20px;
      text-align: center;
      &.login{
        width: 124px;
        height: 40px;
        background: #0A328E;
      }
    }
  }
}


  .cart-btn {
        width: 124px;
        height: 40px;
        background: #0a328e;
        text-align: center; 
        img{
          width: 20px;
          height: 19px;
          vertical-align: middle;
        }
        span{
          margin: 0 8px;
        }
        strong{
          width: 22px;
          height: 22px;
          line-height: 22px;
          display: inline-block;
          border-radius: 50%;
          background-color: #fd604d;
        }
      }
</style>